import Taro, { Component,Config} from '@tarojs/taro'
import {View,Text,Swiper,Image,SwiperItem,Button} from "@tarojs/components"
import home_page from '../images/home_page.png'
import share_others from '../images/share_others.png'
import detIcon from '../images/detIcon.png';
import {getJSON,postJSON,deleteJSON} from '../../services/request';
import {getGlobalData} from "../../utils/global_data";
import bindSuperior from '../../utils/bindSuperior';
import './details.scss'


class Details extends Component {
  config: Config = {
    navigationBarTitleText:'产品详情'
  };

 state ={
   token: Taro.getStorageSync('token'),
   u_hashid: Taro.getStorageSync('u_hashid'),
   //产品详情
   couponDetail:{
     title:'标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
     final_price:'',
     coupon_price:'',
     price:'',
     volume:'',
     introduce:'',
     images:['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg'],
     pic_url:'',
     favourite:'',
   },
   //佣金
   commission:0,
   url:'',
   appId:'',
   //登陆状态
   loginState:false,
   // // 用户信息
   // userInfo:{},
   //分享信息
   obj:{type:'',itemid:'',hashid:'',commission:''},

 };

  // async componentWillMount () {
  //   const loginState=getGlobalData('loginState'),{token} =this.state; //获取用户登陆状态 和 token
  //   let {obj, u_hashid,commission,couponDetail,url,appId}=this.state,type='',itemid='';
  //
  //   console.log('详情页','路由参数',this.$router.params.obj,'用户id',u_hashid);
  //   if(this.$router.params.obj){                 //分享进来的用户（分享进来的不一定带哈希id）
  //     obj=JSON.parse(this.$router.params.obj);  //从路由获取obj
  //     commission=obj.commission;
  //     type=obj.type;
  //     itemid=obj.itemid;
  //
  //     //锁粉
  //     bindSuperior({hashid:obj.hashid});
  //
  //
  //   }else{                                       //正常进来的用户
  //     type=this.$router.params.type;
  //     itemid=this.$router.params.id;
  //     commission=Math.floor(this.$router.params.commission*100)/100;  //计算佣金
  //
  //     //由于一个人的哈希id不会改变，不用管用户当前是否登陆，未登录哈希id=''，锁粉还要校验id是否为空
  //     obj={type,itemid,commission,hashid:u_hashid}    //定义obj供分享时传递
  //     // bindSuperior({hashid:'xvmyv8'}); //测试
  //
  //
  //   }
  //
  //   try{
  //     const res=await this.fnGetDetail(type,itemid,token);  // 调详情
  //     couponDetail=res.data;
  //
  //     if(type==3){ //pdd数据
  //       url=res.data.coupon_url.we_app_info.page_path;
  //       appId=res.data.coupon_url.we_app_info.app_id;
  //     }else{  //京东
  //       url=res.data.coupon_url.url;
  //     }
  //
  //     if(!u_hashid){        //由于调接口会显示loading，覆盖这个提示，所以成功后在提示
  //       Taro.showToast({     //提示用户未登录
  //         title:'当前未登录，不能锁粉',
  //         icon:'none'
  //       });
  //     }
  //
  //     this.setState({
  //       loginState,
  //       obj,
  //       commission,
  //       couponDetail,
  //       url,
  //       appId
  //     });
  //   }catch (res){
  //
  //     if(res.code === 4001) {  //产品过期
  //
  //           Taro.showToast({title:'此商品已下架',icon:'none'});
  //
  //           setTimeout(()=>{
  //             Taro.navigateBack({
  //               delta: 1,
  //               fail:()=>{  //分享进来的，链接失效后跳转首页
  //                 Taro.switchTab({
  //                   url:'/pages/jingdong/jingdong',
  //                 })
  //               }
  //             });
  //           },500)
  //
  //     }
  //     //网络错误
  //   }
  //
  // }

  // 调详情
// fnGetDetail=(type,itemid,token)=>{
//
//   // let {couponDetail,url,appId}=this.state;
//   // 请求详情接口
//
//   return getJSON('/taoke/coupon/detail',{    //调取产品详情
//     type,
//     itemid,
//     token
//   })
//   //   .then(res=>{
//   //   if(res.code === 1001){
//   //     couponDetail=res.data;
//   //     if(type==3){ //pdd数据
//   //         url=res.data.coupon_link.we_app_info.page_path;
//   //         appId=res.data.coupon_link.we_app_info.app_id;
//   //       }else{  //京东
//   //         url=res.data.coupon_url.url;
//   //       }
//   //
//   //     this.setState({
//   //       couponDetail,
//   //       url,
//   //       appId
//   //     });
//   //
//   //   }else if(res.code === 4001) {
//   //
//   //     Taro.showToast({title:'此商品已下架',icon:'none'});
//   //
//   //     setTimeout(()=>{
//   //       Taro.navigateBack({
//   //         delta: 1,
//   //         fail:()=>{  //分享进来的，链接失效后跳转首页
//   //           Taro.switchTab({
//   //             url:'/pages/jingdong/jingdong',
//   //           })
//   //         }
//   //       });
//   //     },500)
//   //
//   //   }
//   // });
// };

  // 分享
  onShareAppMessage(res){
    // const images = this.state.images_images[0];
    const obj=JSON.stringify({...this.state.obj,test:'分享成功'});

    return {
      title: '分享',
      path: '/pages/productDetails/details?obj='+obj,
      // imageUrl:images,
    }

  }
  //返回上一层
  backClick=()=>{
    Taro.navigateBack()
  };
  // 跳转首页
  goIndex=()=>{
    Taro.switchTab({
      url:'/pages/jingdong/jingdong'
    })
  };
  //去user中心
  fngoUser=()=>{
    // Taro.showToast({
    //   title:'正在跳转到登陆界面',
    //   icon:'loading',
    // });
    // setTimeout(()=>{
        Taro.switchTab({
          url:'/pages/user/user'
        })
    // },400)

  };

  // 点击收藏
  // handleCollect = (favourite) =>{
  //   const {token,pic_url,volume,price,coupon_price,final_price,title}=this.state;
  //   if(favourite===0){
  //
  //     postJSON('/taoke/favourite',{
  //       token,
  //       pic_url,
  //       type:this.$router.params.type,
  //       item_id:this.$router.params.id,
  //       price,
  //       volume,
  //       coupon_price,
  //       final_price,
  //       title,
  //     }).then(res=>{
  //
  //       this.setState({
  //          favourite:res.data.id
  //        });
  //       Taro.showToast({title:'收藏成功',icon:'none'})
  //     })
  //   }else if(favourite!==0){
  //     deleteJSON('/taoke/favourite/'+favourite,{
  //       token,
  //       id:favourite
  //     }).then(res=>{
  //       this.setState({
  //         favourite:0,
  //       });
  //       Taro.showToast({title:'取消收藏成功',icon:'none'})
  //     })
  //   }
  // };

  // 跳转小程序
  goMiniPGM=()=>{

    if(this.$router.params.type==2){ //跳转京东小程序
      const {url} = this.state;
      Taro.navigateToMiniProgram({
        appId: 'wx13e41a437b8a1d2e',
        path: '/pages/proxy/union/union?spreadUrl='+encodeURIComponent(url)+'&customerinfo=20190626SHP',
      })

    }else if(this.$router.params.type==3){ //跳转pdd小程序
      const {url,appId} = this.state;
      Taro.navigateToMiniProgram({
        appId: appId,
        path: url,
      }).then(()=>{},()=>{
        Taro.showToast({
          title: '已取消',
          icon: 'none',
          duration: 2000
        })})

    }

  };

  render () {
    const {couponDetail} = this.state;
    return (
      <View className='index'>
        {/*测试*/}
        {/*<View>邀请人的{this.state.obj.test}</View>*/}
        <Swiper
          className='test-h commodity_tit'
          circular
          indicatorDots
          indicatorColor='yellow'
          indicatorActiveColor='#FFF'
          autoplay={false}>
          {couponDetail.images.map((item,index)=>{
            return (
              <SwiperItem key={index}>
                <Image src={item} className='commodity_img'/>
              </SwiperItem>
            )
          })}
        </Swiper>


        <View className='headline_tit' >
          <View className='typeLabel'>京东</View>
          {couponDetail.title || '暂无标题'}
        </View>
        <Text className='discounts'>
          ￥<Text>{Math.floor(couponDetail.final_price*100)/100}</Text>
        </Text>

        <View className='sellInfo'>
          <Text className='sell_num'>原价￥{couponDetail.volume || 0}</Text>
          <Text >{couponDetail.volume || 0}人购买</Text>
        </View>

        <View
          className="quanBox"
          onClick={this.state.loginState?this.goMiniPGM:this.fngoUser}
        >
          优惠券
        </View>

        {/*宝贝详情*/}
        <View className='detailBox'>
          <View className='detail_tit'>
            <Image src={detIcon} mode="widthFix" className='detIcon'/>
            宝贝详情
          </View>
          <View className='detail_tit1'>
            {couponDetail.introduce}
          </View>
          <View className='img_box'>
            {couponDetail.images.map((item,index)=>{
              return(
                <Image src={item} key={index} className='detail_img' mode='widthFix'/>
              )
            })}
          </View>
        </View>
        {/*底部*/}
        <View className='end_out'>
          <View className='innerBox'>
            <View className='home_page' onClick={this.goIndex}>
              <Image src={home_page} className='home_img' mode="widthFix"/>
              首页
            </View>
            {/*<View  onClick={ ()=>this.handleCollect(favourite)}>*/}
              {/*<Image src={couponDetail.favourite !== 0 ?scColor:scWu}/>*/}
              {/*<Text style={couponDetail.favourite === 0 ? { color:'#999'} : { color:'#ff5031' }}>收藏</Text>*/}
            {/*</View>*/}

            <View className='share'>
              {
                this.state.loginState?<Button  open-type="share"/>:<Button onClick={this.fngoUser} />
              }

              <View className='z'>
                <Image src={share_others} className='share_img' mode="widthFix"/>
                分享
              </View>
            </View>
            <View onClick={this.state.loginState?this.goMiniPGM:this.fngoUser} className='bakRed'>领{couponDetail.coupon_price}元内部优惠券</View>

          </View>
        </View>

      </View>
    )
  }
}

export default Details;
